<template>
  <header>
    <!--  未登录-->
    <div class="log" v-if="$store.state.isLogin">
      <van-loading style="line-height: 200px" size="50" color="red" v-show="!$store.state.loading"/>
      <button class="loge" @click="showModal" v-show="$store.state.loading">登录/注册</button>
      <a-modal v-model="visible" title="" footer="" @ok="handleOk">
        <a-tabs default-active-key="1"  style="margin-top: 20px">
          <a-tab-pane key="1">
      <span slot="tab" @click="empty">
        立即登录
      </span>
            <a-form-model layout="horizontal" :model="formInline" @submit="handleSubmit" >
              <a-form-model-item>
                <a-input v-model="loginName" placeholder="用户名">
                  <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="password" type="password" placeholder="密码" @blur="test" @focus="tent">
                  <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <img v-show="zy" style="width:18%;height: 50px;float: left" src="https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login/img/22_open.72c00877.png" alt="">
                <img v-show="!zy" style="width:18%;height: 50px;float: left" src="https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login/img/22_close.0efad8c4.png" alt="">
                <button
                    type="button"
                    style="width: 64%;border: 0;margin-top: 10px;background-image: url('/img/猫耳.png');background-size: 100%;color:white"
                    @click="gologin"
                >登录</button>
                <img v-show="zy" style="width:18%;height: 50px;float: right" src="https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login/img/33_open.43a09438.png" alt="">
                <img v-show="!zy" style="width:18%;height: 50px;float: right" src="https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login/img/33_close.eea03c39.png" alt="">
              </a-form-model-item>
            </a-form-model>
          </a-tab-pane>
          <a-tab-pane key="2">
      <span slot="tab" @click="empty">
        立即注册
      </span>
            <a-form-model layout="horizontal" :model="formInline" @submit="handleSubmit" >
              <a-form-model-item>
                <a-input v-model="loginName" placeholder="请输入账号（8位以上）">
                  <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="password" type="password" placeholder="请输入密码">
                  <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="password1" type="password" placeholder="确认密码">
                  <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="userName" placeholder="请输入您的昵称">
                  <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="phonenumber" placeholder="手机号">
                  <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)"/>
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="vCode" placeholder="验证码" style="width: 60%;margin-right: 20px">
                  <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)"/>
                </a-input>
                <span style="background-color: red;border: 0;color: white;padding: 5px 10px;border-radius: 3px" @click="getCode" v-if="getVc"> 获取验证码 </span>
                <span v-show="!getVc" style="background-color: gray; border: 0;color: white;padding: 5px 10px;border-radius: 3px">请等候{{time}}秒</span>
              </a-form-model-item>
              <a-form-model-item>
                <a-button
                    type="primary"
                    style="width: 100%;background-color: red;border: 0"
                    @click="goEegister"
                >立即注册</a-button>
              </a-form-model-item>
            </a-form-model>
          </a-tab-pane>
          <a-tab-pane key="3">
      <span slot="tab" @click="empty">
        忘记密码
      </span>
            <a-form-model layout="horizontal" :model="formInline" @submit="handleSubmit" >
              <a-form-model-item>
                <a-input v-model="loginName" placeholder="账号">
                  <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="password" type="password" placeholder="输入新密码">
                  <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="password1" type="password" placeholder="再次输入新密码">
                  <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="phonenumber" placeholder="手机号">
                  <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)"/>
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input v-model="vCode" placeholder="验证码" style="width: 60%;margin-right: 20px">
                  <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)"/>
                </a-input>
                <span style="background-color: red;border: 0;color: white;padding: 5px 10px;border-radius: 3px" @click="getCode" v-show="getVc"> 获取验证码 </span>
                <span v-show="!getVc" style="background-color: gray; border: 0;color: white;padding: 5px 10px;border-radius: 3px">请等候{{time}}秒</span>
              </a-form-model-item>
              <a-form-model-item>
                <a-button
                    type="primary"
                    style="width: 100%;background-color: red;border: 0"
                    @click="goForget"
                >修改密码</a-button>
              </a-form-model-item>
            </a-form-model>
          </a-tab-pane>
        </a-tabs>
      </a-modal>
    </div>
    <!--  登录成功-->
    <div class="login" v-else>
      <p style="width: 95%;height: 30px"><van-icon name="ellipsis" @click="show = true" color="white" size="30px" style="float: right"/></p>
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
      <div class="user">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F94e3dd6d94e50367940678319958b7d091461d7cf69-dQTIhW_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131201&t=a37a6805622e2a57899e17081e106432&qq-pf-to=pcqq.group" alt="" v-if="$store.state.loginObj.avatar == ''">
        <img :src="$store.state.loginObj.avatar" alt="" v-else><div><div>{{$store.state.loginObj.userName}}</div><router-link to="/personal" tag="span"><van-icon name="arrow" /></router-link></div>
      </div>
      <ul>
        <li><a>0</a><br>动态</li>
        <li><a>0</a><br>粉丝</li>
        <li><a>0</a><br>7天访客</li>
      </ul>
    </div>
  </header>
</template>

<script>
import {code, forget,login, logout, registry} from "@/http/api";

import { Toast } from 'vant';
export default {
  name: "MySelf",
  watch : {

  },
  data() {
    return {
      //输入密码闭眼
      zy:true,
      //页面加载
      loading:true,
      //用户名
      userName:'',
      //倒计时
      time:60,
      //验证码显示隐藏
      getVc:true,
      //验证码
      vCode:'',
      //账号
      loginName:'',
      //电话号
      phonenumber:'',
      //密码
      password:'',
      //确认密码
      password1:'',
      //true为显示未登录，false为显示已登录
      login:true,
      //获取到的用户消息
      loginObj:{},
      //弹框显示隐藏
      show: false,
      //退出登录的弹框内容
      actions: [{ name: '退出登录' }],
      formInline: {
        user: '',
        password: '',
      },
      //弹框显示隐藏
      visible: false,
      confirmLoading: false,
    }
  },
  methods: {
    //请0
    empty() {
      this.loginName = '',this.vCode = '',this.phonenumber = '', this.password = '',this.password1 = '', this.userName = ""
      clearInterval(this.timer)
      this.getVc = true
    },
    //失去焦点
    test() {
      this.zy = true
    },
    //获取焦点
    tent() {
      this.zy = false
    },
    //打开弹窗
    showModal() {
      this.visible = true;
    },
    //关闭弹窗
    handleOk() {
      this.visible = false;
    },
    //表单
    handleSubmit() {
    },
    //立即注册
    goEegister() {
      if (this.loginName == ''|| this.vCode == ''|| this.phonenumber == ''|| this.password == ''|| this.userName == "") {
        Toast("请将信息填充完整");
      } else if(this.password != this.password1) {
        Toast("两次输入的密码不相同");
      }else {
        registry(this.loginName,this.vCode,this.phonenumber,this.password,this.userName).then(res => {
          if (res.data.code == 0) {

            this.visible = false;
            Toast("注册成功");
            this.getVc = true
            this.loginName = '',this.vCode = '',this.phonenumber = '', this.password = '',this.password1 = '', this.userName = "";
          }else {
            Toast(res.data.msg);
          }
        })
      }
    },
    //获取验证码
    getCode() {
      if (this.phonenumber == '') {
        Toast("请输入手机号");
      }
      code(this.phonenumber).then(res => {
        if (res.data.code == 0) {
          Toast("发送成功");
          this.getVc = false
          this.time = 60
          let timer = setInterval(() => {
            this.time--
            if (this.time == 0) {
              clearInterval(timer)
              this.getVc = true
            }
          }, 1000)
        } else {
          Toast("请输入正确的手机号");
        }
      })
    },
    //登录账号
    gologin() {
      login(this.loginName,this.password).then(res => {
        this.loginObj = res.data.data
        this.$store.state.loginObj = this.loginObj
        if (res.data.code == 0) {
          this.visible = false;
          this.login = false;
          this.$store.commit('getLogin',this.login)
          Toast("登录成功");
          this.loginName = '',this.vCode = '',this.phonenumber = '', this.password = '',this.password1 = '', this.userName = "";
        }else {
          Toast(res.data.msg);
        }
      })
    },
    //退出登录的弹框
    onSelect() {
      logout().then(res => {
        if(res.status == 200) {
          this.login = true;
          this.$store.commit('getLogin',this.login)
          this.show = false;
          Toast("退出成功");
        }
      })
    },
    // 忘记密码
    goForget() {
      if (this.loginName == '' || this.vCode == ''|| this.phonenumber == '' || this.password == '') {
        Toast("请将信息填充完整");
      } else if (this.password != this.password1) {
        Toast("两次输入的密码不相同");
      } else {
        forget(this.loginName, this.vCode, this.phonenumber, this.password).then(res => {
          if (res.data.code == 0) {
            this.visible = false;
            this.getVc = true
            Toast("修改成功");
            this.loginName = '', this.vCode = '', this.phonenumber = '', this.password = '', this.password1 = '', this.userName = "";
          }else {
            Toast(res.data.msg);
          }
        })
      }
    }
  },
}
</script>

<style scoped lang="less">
//退出登录弹框样式
.van-action-sheet__item{
  -webkit-appearance: button;
  height: 60px;
  font-size: 20px;
}
@bgColor: red;
//头部
header {
  //background-color: #3E3E3E;
  background-image: url("https://tupian.qqw21.com/article/UploadPic/2014-9/201491820292057487.gif");
  //background-position: 30%;
  background-size: 100% 100%;
  text-align: center;
  width: 100%;
  height: 200px;
  >log {
    width: 100%;
    height: 100%;
  }
  //未登录按钮
  .loge {
    margin-top: 50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 0;
    background-color: rgba(255,0,0,0);
    color: white;
    font-weight: 700;
    font-size: 22px;
  }
  //登录成功
  >.login {
    padding-top: 10px;
    width: 100%;
    height: 100%;
    >.user {
      display: flex;
      margin: auto;
      width: 90%;
      height: 80px;
      line-height: 80px;
      >img {
        width: 66px;
        height: 66px;
        border-radius: 20%;
      }
      >div {
        margin-left: 20px;
        text-align: left;
        width: calc(100% - 70px);
        color: white;
        font-size: 20px;
        >div {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 150px;
          float: left;
        }
        >span {
          float: right;
        }
      }

    }
    >ul {
      margin: 10px auto;
      width: 90%;
      list-style: none;
      display: flex;
      >li {
        text-align: center;
        width: 33%;
        color: gray;
        >a {
          color: white;
        }
      }
    }
  }

}
</style>